<script lang="ts" setup>
import { reactive, ref, onMounted, toRaw } from 'vue'
import type { ElTable } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { Search, RefreshRight, MessageBox } from '@element-plus/icons-vue'
import { DbModel } from './class/DbModel'
import { GetDblist, } from '../../../http/index'
import addVue from './components/add.vue'
const ruleFormRef = ref<FormInstance>()
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const form = reactive({
    name: "",
    url: "",
    dbname: "",
    username: "",
    password: "",
    type: "",
})
const rules = reactive<FormRules>({
    name: [{ required: false, message: '请输入任务ID', trigger: 'blur' }]
})



const addVisible = ref(false)
const add = () => {
    info.value = null;
    addVisible.value = true
}
const CloseAdd = () => {
    addVisible.value = false
    info.value = undefined
    LoadTableData()
}
const info = ref()
const handleEdit = (index: number, row: DbModel) => {
    info.value = JSON.stringify(row)
    addVisible.value = true
}




//单个删除
const handleDelete = async (index: number, row: DbModel) => {
    // tableData.value = tableData.value?.filter(s => s.id != row.id)
    // const res = await delUsers(row.id) as any as boolean
    // if (res) {
    //     ElMessage({
    //         message: '删除成功！',
    //         type: 'success',
    //     })
    // }
}
//批量删除
const Del = async () => {
    // let arr: any[] = multipleTableRef.value?.getSelectionRows()
    // let ids: string = arr.map(item => { return "'" + item.id + "'" }).join(',')
    // const res = await batchDelUsers(ids) as any as boolean
    // if (res) {
    //     ElMessage({
    //         message: '删除成功！',
    //         type: 'success',
    //     })
    //     LoadTableData()
    // }
}
// const queryDialog = ref(false)
// const queryDialogClose = () => {
//     queryDialog.value = false;
// }
//表格
const tableData = ref<Array<DbModel>>()
onMounted(async () => {
    LoadTableData()
})
const LoadTableData = async (name: string = "") => {
    let parms: string;
    let res = await GetDblist() as any
    console.log(res);

    // form.Total = res.total

    // console.log(await getJobList(0) as any);
    // console.log(res);
    tableData.value = res as DbModel[]
    console.log(tableData)
}
//分页
const handleCurrentChange = (val: number) => {
    // form.pageIndex = val
    // LoadTableData()
}


</script>
<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <!-- <el-form :inline="true" :model="form" class="demo-form-inline" :rules="rules" ref="ruleFormRef">
                    <el-form-item label="名称" prop="name">
                        <el-input style="width: 300px;" v-model="form.jobId" placeholder="目前仅支持任务ID查询，请输入任务ID" />
                    </el-form-item>
                    <el-form-item>

                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit(ruleFormRef)">
                            <el-icon>
                                <search />
                            </el-icon>查询
                        </el-button>
                        <el-button @click="resetForm(ruleFormRef)">
                            <el-icon>
                                <refresh-right />
                            </el-icon>重置
                        </el-button>
                    </el-form-item>
                </el-form> -->
                <p>
                    <el-button type="primary" @click="add">新增</el-button>

                    <!-- <el-button type="danger" @click="Del">删除</el-button>
                    <el-button type="primary" @click="SetingRole">分配角色</el-button> -->
                </p>
            </div>
        </template>
        <el-table :data="tableData" style="width: 100%" ref="multipleTableRef">
            <el-table-column type="selection" width="55" />
            <el-table-column label="连接名称" width="70">
                <template #default="scope">
                    <div>{{ scope.row.name }}</div>
                </template>
            </el-table-column>
            <el-table-column label="数据库类型">
                <template #default="scope">
                    <div>{{ scope.row.type }}</div>
                </template>
            </el-table-column>
            <el-table-column label="连接地址">
                <template #default="scope">
                    <div>{{ scope.row.url }}</div>
                </template>
            </el-table-column>
            <el-table-column label="数据库名称">
                <template #default="scope">
                    <div>{{ scope.row.dbname }}</div>
                </template>
            </el-table-column>
            <el-table-column label="用户名">
                <template #default="scope">
                    <div>{{ scope.row.username }}</div>
                </template>
            </el-table-column>
            <el-table-column label="密码">
                <template #default="scope">
                    <div>{{ scope.row.password}}</div>
                </template>
            </el-table-column>
            


            <el-table-column label="操作" align="right" width="200">
                <template #default="scope">
                    <!-- <el-button size="small" type="success" @click="handleQuery(scope.$index, scope.row)">详情</el-button> -->
                    <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <!-- <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
                    <!-- <template v-if="scope.row.jobStatus===0"><el-button size="small" type="success" >启动</el-button></template>
        <template v-if="scope.row.jobStatus===1"><el-button size="small" type="warning" >停止</el-button></template> -->


                </template>
            </el-table-column>
        </el-table>
        <!-- <el-pagination background layout="prev, pager, next" :total="form.jobId"
            @current-change="handleCurrentChange" /> -->
    </el-card>
    <addVue :addVisible="addVisible" :info="info" @CloseAdd="CloseAdd"></addVue>
</template>
<style lang="scss" scoped>
.el-pagination {
    margin-top: 50px;
}

.cell {
    text-align: center !important;
}

.queryTable {
    width: 500px;
    border-collapse: collapse;

    tr {
        height: 50px;

        td {
            padding: 10px;
        }

        .left {
            width: 30%;
            background-color: #F5F7FA;
        }

        .right {
            width: 80%;
        }
    }
}
</style>